<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>两栏布局（要求自适应，左侧和中间部分间隔20px）</title>
    <style>
        .wrapper {
            padding: 15px 20px;
            width: 300px;
            border: 1px dashed #ff6c60;
        }

        .left {
            width: 120px;
            border: 5px solid #ddd;
        }

        .right {
            margin-left: 20px;
            border: 5px solid #ddd;
        }
    </style>


</head>

<body>
    <!-- 方案1：通过两个inline-block+calc()计算宽度 -->
    <div class="wrapper wrapper-inline-block" id="wrapper">
        <style>
            .wrapper-inline-block {
                box-sizing: content-box;
                /*要知道右侧盒子的宽度，需要知道左侧盒子具体宽度（content+border+padding），
               需要知道右侧盒子距左边的距离以及是否有border，
               所以左右侧盒子设置成border-box方便计算；
               父元素设置成标准模式这样width直接就是content的width
               为了简单计算右侧盒子的精准宽度*/
                font-size: 0;
                /* 设置为inline-block后为了精准计算右侧盒子宽度，
               需要去掉元素之间的空白（这个空白是代码的换行空格造成的，可以去掉换行空格；
               也可以设置父元素font-size:0，子元素内部再设置font-size） */
            }

            .wrapper-inline-block .left,
            .wrapper-inline-block .right {
                display: inline-block;
                vertical-align: top;
                /*vertical-align可以用来设置inline-X的垂直对齐方式*/
                font-size: 14px;
                box-sizing: border-box;
            }

            .wrapper-inline-block .right {
                width: calc(100% - 140px);
                /*因为inline-block有inline元素特性（不换行，可以设置宽高和margin-top/bottom） 
                如果不计算width，right盒子会被文字整个撑开，
                随着文字增加增加的是宽度而不是高度，
                最后right宽度超出整个页面宽度后会换行*/
            }
        </style>
        <div class="left">
            左边固定宽度，高度不固定 </br>
            </br>
            </br>
            </br>高度有可能会很小，也可能很大。
        </div>
        <div class="right">
            这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
            基本的样式是，两个div相距20px, 左侧div宽 120px
        </div>
    </div>
    <!-- 方案2：通过两个float计算宽度 -->
    <!-- 1.和双inline-block类似，需要动态计算右侧盒子宽度，因为float元素如果不设置宽度，元素宽度会随内容变化而变化
        2.此外因为要计算宽度所以要设置盒子的box-sizing；
        3.又因为浮动的元素在有空间情况下依次紧贴，排列在一行，所以不需要设置inlin-block，也不需要消除空格字符，顶端对齐等-->
    <div class="wrapper wrapper-double-float" id="wrapper">
        <style>
            .wrapper-double-float {
                overflow: auto;
                box-sizing: content-box;
            }

            .wrapper-double-float .left,
            .wrapper-double-float .right {
                float: left;
                box-sizing: border-box;
            }

            .wrapper-double-float .right {
                width: calc(100% - 140px);
            }
        </style>
        <div class="left">
            左边固定宽度，高度不固定 </br>
            </br>
            </br>
            </br>高度有可能会很小，也可能很大。
        </div>
        <div class="right">
            这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
            基本的样式是，两个div相距20px, 左侧div宽 120px
        </div>
    </div>
    <!-- 方案3：通过float+margin-left-->
    <!-- 1.方案1，2都需要通过calc()来计算右侧元素宽度，因为右侧元素宽度随内容变化而变化，所以本次将使用右侧元素block元素
            （block级别的元素盒子具有填满父容器，并随父容器的宽度自适应的流动性）
         2.因为block元素都是独占一行，所以要想办法让两个block元素排列一起
         3.因为block元素会认为float元素不存在，但是inline元素能识别浮动元素。这样block级别的元素就可以和浮动元素同处一行了
         4.为了让右侧盒子和左侧盒子保持距离，需要为左侧盒子流出足够距离，这个距离为左侧盒子content-width+padding+border+两个盒子距离-->
    <div class="wrapper wrapper-float" id="wrapper">
        <style>
            .wrapper-float {
                overflow: auto;
            }

            .wrapper-float .left {
                float: left;
            }

            .wrapper-float .right {
                margin-left: 150px;
            }
        </style>
        <div class="left">
            左边固定宽度，高度不固定-- </br>
            </br>
            </br>
            </br>高度有可能会很小，也可能很大。
        </div>
        <div class="right">
            这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
            基本的样式是，两个div相距20px, 左侧div宽 120px
             基本的样式是，两个div相距20px, 左侧div宽 120px 基本的样式是，两个div相距20px, 左侧div宽 120px
        </div>
    </div>
    <!-- 方案4：通过absolute+margin-left方法
        1. 另外一个让两个block排列到一起的方案是对左侧盒子使用position:absolute，这样右侧盒子也能无视掉它，因为左侧盒子脱离文档流
        2. 注意：float脱离文档流之后，float元素还会占据一个位置，所以文字会围绕显示；absolute则是相当于从这个标准文档流中删除了，文字直接无视
        3. 因为完全脱离文档流，所以无法清除浮动。如果左侧盒子高度超出右侧盒子，就会超出父容器高度（因为父容器高度被子容器撑起来）。
            因此只能通过设置父容器min-height来解决这种情况-->
    <div class="wrapper wrapper-absolute" id="wrapper">
        <style>
            .wrapper-absolute {}

            .wrapper-absolute .left {
                position: absolute;
            }

            .wrapper-absolute .right {
                margin-left: 150px;
            }
        </style>
        <div class="left">
            左边固定宽度，高度不固定 </br>
            </br>
            </br>高度有可能会很小，也可能很大。
        </div>
        <div class="right">
            这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
            基本的样式是，两个div相距20px, 左侧div宽 120px
        </div>
    </div>
    <!-- 方案5：通过float+BFC 
        1.以上几种方法都需要通过左侧盒子的宽度来计算某个值，下面几种方法都是不需要计算的，只需要设置两个盒子之间的间隔
        2.同样利用左侧浮动，但是右侧盒子形成BFC，因此右侧盒子不会与左侧重叠，又因为右侧是block，默认与父元素大小一样，所以也不需要设置width
        3.注意要设置左侧盒子的margin-right，而不是右侧盒子的margin-left。因为右侧盒子设置了BFC，
            有BFC的元素的margin-box的左侧与包含块border box的左边接触（对于从右向左格式化相反），即使存在浮动也是
            所以如果对右侧盒子设置margin-left相当于是从父元素算起，又要计算左侧盒子width，所以可简单设置左侧盒子的margin-right-->
    <div class="wrapper wrapper-float-bfc" id="wrapper">
        <style>
            .wrapper-float-bfc {
                overflow: auto;
            }

            .wrapper-float-bfc .left {
                float: left;
                margin-right: 20px;
            }

            .wrapper-float-bfc .right {
                overflow: auto;
                margin-left: 0;
            }
        </style>
        <div class="left">
            左边固定宽度，高度不固定 </br>
            </br>
            </br>
            </br>高度有可能会很小，也可能很大。
        </div>
        <div class="right">
            这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
            基本的样式是，两个div相距20px, 左侧div宽 120px
        </div>
    </div>
    <!-- 方案6：flex 
        1. align-items默认为stretch即填充，会导致列等高的效果，为了让两个盒子高度自动，需要设置为align-items:flex-start
        2. 因为左侧盒子宽度确定，右侧盒子宽度随之变化，所以左侧flex 0 0 auto（auto是指flex-basis：auto，元素长度=元素指定的width，如果没有指定按照内容确定）
            右侧盒子宽度自适应，所以flex：1 1 auto-->
    <div class="wrapper wrapper-grid" id="wrapper">
        <style>
            .wrapper-grid {
                display: grid;
                grid-template-columns: 120px 1fr;
                align-items: start;
            }

            .wrapper-grid .left,
            .wrapper-grid .right {
                box-sizing: border-box;
            }

            .wrapper-grid .left {
                grid-column: 1;
            }

            .wrapper-grid .right {
                grid-column: 2;
            }
        </style>
        <div class="left">
            7左边固定宽度，高度不固定 </br>
            </br>
            </br>
            </br>高度有可能会很小，也可能很大。
        </div>
        <div class="right">
            这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
            基本的样式是，两个div相距20px, 左侧div宽 120px
        </div>
    </div>

</body>
</body>

</html>